<template>
  <div class="app-pro-basicLayout-content-wrap">
    <div class="app-pro-pages-content">
      <el-row :gutter="20">
        <el-col :md="24" :lg="24" :xl="12" style="margin-bottom:20px">
          <el-card class="box-card">
            <div slot="header" class="box-card-header">
              <div>일별 회원현황 <i @click="getCountMember(1);memberDateValue=[]" class="el-icon-refresh"></i></div>
              <div>
                <el-date-picker
                  v-model="memberDateValue"
                  type="daterange"
                  size="small"
                  @change="(val) => getCountMember(1,val[0],val[1])"
                  range-separator="/"
                  value-format="yyyy-MM-dd"
                  start-placeholder="시작 시간"
                  end-placeholder="종료 시간">
                </el-date-picker>
              </div>
            </div>
            <div class="box-card-body">
              <el-table
                :data="memberDateTableData"
                height="300"
                style="width: 100%">
                <el-table-column
                  prop="date"
                  label="날짜">
                </el-table-column>
                <el-table-column
                  prop="value"
                  align="center"
                  label="신규회원수">
                </el-table-column>
                <el-table-column
                  prop="del"
                  align="center"
                  label="탈퇴회원수">
                </el-table-column>
                <el-table-column
                  prop="count"
                  align="center"
                  label="누적회원수">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
        <el-col :md="24" :lg="24" :xl="12" style="margin-bottom:20px">
          <el-card class="box-card">
            <div slot="header" class="box-card-header">
              <span>월별 회원현황 <i @click="getCountMember(2);memberMonthValue=''" class="el-icon-refresh"></i></span>
              <div>
                <el-date-picker
                  v-model="memberMonthValue"
                  type="month"
                  size="small"
                  @change="(val) => getCountMember(2,val,val)"
                  range-separator="/"
                  value-format="yyyy-MM"
                  start-placeholder="시작 시간"
                  end-placeholder="종료 시간">
                </el-date-picker>
              </div>
            </div>
            <div class="box-card-body">
              <el-table
                :data="memberMonthTableData"
                height="300"
                style="width: 100%">
                <el-table-column
                  prop="month"
                  label="날짜">
                </el-table-column>
                <el-table-column
                  prop="value"
                  align="center"
                  label="신규회원수">
                </el-table-column>
                <el-table-column
                  prop="del"
                  align="center"
                  label="탈퇴회원수">
                </el-table-column>
                <el-table-column
                  prop="count"
                  align="center"
                  label="누적회원수">
                </el-table-column>
                <el-table-column
                  prop="sum_del"
                  align="center"
                  label="누적탈퇴회원수">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :md="24" :lg="24" :xl="12" style="margin-bottom:20px">
          <el-card class="box-card">
            <div slot="header" class="box-card-header">
              <div>일별 채용정보<i @click="getCountIntegrated(1);integratedDateValue=[]" class="el-icon-refresh"></i></div>
              <div>
                <el-date-picker
                  v-model="integratedDateValue"
                  type="daterange"
                  size="small"
                  @change="(val) => getCountIntegrated(1,val[0],val[1])"
                  value-format="yyyy-MM-dd"
                  range-separator="/"
                  start-placeholder="시작 시간"
                  end-placeholder="종료 시간">
                </el-date-picker>
              </div>
            </div>
            <div class="box-card-body">
              <el-table
                :data="integratedDateTableData"
                height="300"
                style="width: 100%">
                <el-table-column
                  prop="date"
                  label="날짜">
                </el-table-column>
                <el-table-column
                  prop="value"
                  align="center"
                  label="신규 채용정보수">
                </el-table-column>
                <el-table-column
                  prop="count"
                  align="center"
                  label="누적 채용정보수">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
        <el-col :md="24" :lg="24" :xl="12" style="margin-bottom:20px">
          <el-card class="box-card">
            <div slot="header" class="box-card-header">
              <span>월별 채용정보<i @click="getCountIntegrated(2);integratedMonthValue=''" class="el-icon-refresh"></i></span>
              <div>
                <el-date-picker
                  v-model="integratedMonthValue"
                  type="month"
                  size="small"
                  @change="(val) => getCountIntegrated(2,val,val)"
                  value-format="yyyy-MM"
                  range-separator="/"
                  start-placeholder="시작 시간"
                  end-placeholder="종료 시간">
                </el-date-picker>
              </div>
            </div>
            <div class="box-card-body">
              <el-table
                :data="integratedMonthTableData"
                height="300"
                style="width: 100%">
                <el-table-column
                  prop="month"
                  label="날짜">
                </el-table-column>
                <el-table-column
                  prop="value"
                  align="center"
                  label="신규 채용정보수">
                </el-table-column>
                <el-table-column
                  prop="count"
                  align="center"
                  label="누적 채용정보수">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :md="24" :lg="24" :xl="12" style="margin-bottom:20px">
          <el-card class="box-card">
            <div slot="header" class="box-card-header">
              <div>일별 인재정보<i @click="getCountCv(1);cvDateValue=[]" class="el-icon-refresh"></i></div>
              <div>
                <el-date-picker
                  v-model="cvDateValue"
                  type="daterange"
                  size="small"
                  @change="(val) => getCountCv(1,val[0],val[1])"
                  value-format="yyyy-MM-dd"
                  range-separator="/"
                  start-placeholder="시작 시간"
                  end-placeholder="종료 시간">
                </el-date-picker>
              </div>
            </div>
            <div class="box-card-body">
              <el-table
                :data="cvDateTableData"
                height="300"
                style="width: 100%">
                <el-table-column
                  prop="date"
                  label="날짜">
                </el-table-column>
                <el-table-column
                  prop="value"
                  align="center"
                  label="신규 인재정보수">
                </el-table-column>
                <el-table-column
                  prop="count"
                  align="center"
                  label="누적 인재정보수">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
        <el-col :md="24" :lg="24" :xl="12" style="margin-bottom:20px">
          <el-card class="box-card">
            <div slot="header" class="box-card-header">
              <span>월별 인재정보<i @click="getCountCv(2);cvMonthValue=''" class="el-icon-refresh"></i></span>
              <div>
                <el-date-picker
                  v-model="cvMonthValue"
                  type="month"
                  size="small"
                  @change="(val) => getCountCv(2,val,val)"
                  value-format="yyyy-MM"
                  range-separator="/"
                  start-placeholder="시작 시간"
                  end-placeholder="종료 시간">
                </el-date-picker>
              </div>
            </div>
            <div class="box-card-body">
              <el-table
                :data="cvMonthTableData"
                height="300"
                style="width: 100%">
                <el-table-column
                  prop="month"
                  label="날짜">
                </el-table-column>
                <el-table-column
                  prop="value"
                  align="center"
                  label="신규 인재정보수">
                </el-table-column>
                <el-table-column
                  prop="count"
                  align="center"
                  label="누적 인재정보수">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :md="24" :lg="24" :xl="12" style="margin-bottom:20px">
          <el-card class="box-card">
            <div slot="header" class="box-card-header">
              <div>일별 서비스이용현황<i @click="getCountOrder(1);orderDateValue=[]" class="el-icon-refresh"></i></div>
              <div>
                <el-date-picker
                  v-model="orderDateValue"
                  type="daterange"
                  size="small"
                  @change="(val) => getCountOrder(1,val[0],val[1])"
                  value-format="yyyy-MM-dd"
                  range-separator="/"
                  start-placeholder="시작 시간"
                  end-placeholder="종료 시간">
                </el-date-picker>
              </div>
            </div>
            <div class="box-card-body">
              <el-table
                :data="orderDateTableData"
                height="300"
                style="width: 100%">
                <el-table-column
                  prop="date"
                  label="날짜">
                </el-table-column>
                <el-table-column
                  prop="취업상담"
                  align="center"
                  label="취업상담">
                </el-table-column>
                <el-table-column
                  prop="이력서 클리닉"
                  align="center"
                  label="이력서클리닉">
                </el-table-column>
                <el-table-column
                  prop="채용정보서칭"
                  align="center"
                  label="채용정보서칭">
                </el-table-column>
                <el-table-column
                  prop="모의 전형"
                  align="center"
                  label="모의서류전형">
                </el-table-column>
                <el-table-column
                  prop="모의 면접"
                  align="center"
                  label="모의면접">
                </el-table-column>
                <el-table-column
                  prop="value"
                  align="center"
                  label="합계">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
        <el-col :md="24" :lg="24" :xl="12" style="margin-bottom:20px">
          <el-card class="box-card">
            <div slot="header" class="box-card-header">
              <span>월별 서비스이용현황<i @click="getCountOrder(2);orderMonthValue=''" class="el-icon-refresh"></i></span>
              <div>
                <el-date-picker
                  v-model="orderMonthValue"
                  type="month"
                  size="small"
                  @change="(val) => getCountOrder(2,val,val)"
                  value-format="yyyy-MM"
                  range-separator="/"
                  start-placeholder="시작 시간"
                  end-placeholder="종료 시간">
                </el-date-picker>
              </div>
            </div>
            <div class="box-card-body">
              <el-table
                :data="orderMonthTableData"
                height="300"
                style="width: 100%">
                <el-table-column
                  prop="month"
                  label="날짜">
                </el-table-column>
                <el-table-column
                  prop="취업상담"
                  align="center"
                  label="취업상담">
                </el-table-column>
                <el-table-column
                  prop="이력서 클리닉"
                  align="center"
                  label="이력서클리닉">
                </el-table-column>
                <el-table-column
                  prop="채용정보서칭"
                  align="center"
                  label="채용정보서칭">
                </el-table-column>
                <el-table-column
                  prop="모의 전형"
                  align="center"
                  label="모의서류전형">
                </el-table-column>
                <el-table-column
                  prop="모의 면접"
                  align="center"
                  label="모의면접">
                </el-table-column>
                <el-table-column
                  prop="value"
                  align="center"
                  label="합계">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as DashboardApi from '@/api/dashboard'
export default {
  name: 'dashboard',
  data () {
    return {
      memberDateValue: [],
      memberDateTableData: [],
      memberMonthValue: [],
      memberMonthTableData: [],
      integratedDateValue: [],
      integratedDateTableData: [],
      integratedMonthValue: [],
      integratedMonthTableData: [],
      cvDateValue: [],
      cvDateTableData: [],
      cvMonthValue: [],
      cvMonthTableData: [],
      orderDateValue: [],
      orderDateTableData: [],
      orderMonthValue: [],
      orderMonthTableData: []
    }
  },
  mounted () {
    this.getCountMember(1)
    this.getCountMember(2)
    this.getCountIntegrated(1)
    this.getCountIntegrated(2)
    this.getCountCv(1)
    this.getCountCv(2)
    this.getCountOrder(1)
    this.getCountOrder(2)
  },
  methods: {
    getCountMember (type, startTime, endTime) {
      DashboardApi.getCountMember({ type, start_time: startTime, end_time: endTime }).then(res => {
        if (type === 1) {
          this.memberDateTableData = res
        } else {
          this.memberMonthTableData = res
        }
      })
    },
    getCountIntegrated (type, startTime, endTime) {
      DashboardApi.getCountIntegrated({ type, start_time: startTime, end_time: endTime }).then(res => {
        if (type === 1) {
          this.integratedDateTableData = res
        } else {
          this.integratedMonthTableData = res
        }
      })
    },
    getCountCv (type, startTime, endTime) {
      DashboardApi.getCountCv({ type, start_time: startTime, end_time: endTime }).then(res => {
        if (type === 1) {
          this.cvDateTableData = res
        } else {
          this.cvMonthTableData = res
        }
      })
    },
    getCountOrder (type, startTime, endTime) {
      DashboardApi.getCountOrder({ type, start_time: startTime, end_time: endTime }).then(res => {
        if (type === 1) {
          this.orderDateTableData = res
        } else {
          this.orderMonthTableData = res
        }
      })
    }
  }
}
</script>

<style lang="scss">
.box-card-header i.el-icon-refresh{
  margin-left:10px;
  font-size:16px;
  color:#409eff;
  cursor: pointer;
}
</style>
